<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>学生列表</title>
    <style>
        body {
            text-align: center;
            background-color: antiquewhite;
        }

        table {
            margin: 0 auto;
            background-color: #6abb91;
            border-radius: 10px;
        }

        th {
            width: 100px;
        }

        a {
            text-decoration: none;
            color: black;
        }

        .headDiv {
            position: relative;
            height: 50px;
            width: 1100px;
            margin: 0 auto;
        }

        .searchName, .searchClass, .searchButton {
            position: absolute;
            height: 30px;
            border-radius: 10px;
            border: none;
        }

        .searchName {
            left: 0;
        }

        .searchClass {
            left: 200px;
        }

        .searchButton {
            left: 400px;
        }
    </style>
</head>
<body>
<h1>学生列表</h1>

<button>
    <a th:href="@{/student/findAll}">学生列表</a>
</button>
<button>
    <a th:href="@{/teacher/findAll}">教师列表</a>
</button>

<div class="headDiv">
    <form th:action="@{/student/findAll}" method="get">
        <input class="searchName" type="text" name="name" placeholder="输入名字">
        <input class="searchClass" type="text" name="className" placeholder="输入班级">
        <input class="searchButton" type="submit" value="搜索">
    </form>
    <button style="position: absolute;right: 20px;height: 30px;border-radius: 10px;background-color: aqua;border: none">
        <a th:href="@{/student/goAddStudent}">新增</a>
    </button>
    <button style="position: absolute;right: 100px;height: 30px;border-radius: 10px;background-color: orange;border: none">
        <a th:href="@{/student/output}">导出</a>
    </button>
</div>

<table>
    <thead>
        <th>ID</th>
        <th>照片</th>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
        <th>学号</th>
        <th>辅导员</th>
        <th style="width: 200px">班级</th>
        <th style="width: 200px">入学时间</th>
        <th>是否毕业</th>
        <th>操作</th>
    </thead>
    <tbody>
        <!-- th:each 会循环 dataList 生成相应数量的 tr 标签，data 是每次循环取出的数据，data 是 Student 类型的，所以里面有 data.id 等字段 -->
        <tr th:each="data : ${dataList}">
            <td th:text="${data.id}">1</td>
            <td>
                <form th:if="${data.imgUrl} == null or ${data.imgUrl} == ''" th:action="@{/student/upload}" method="post" enctype="multipart/form-data">
                    <!-- 设置一个隐藏的input，用于携带当前行id，保存上传的图片路径 -->
                    <input type="text" th:value="${data.id}" hidden="hidden" name="id">
                    <input type="file" name="multipartFile" accept="image/*">
                    <input type="submit">
                </form>
                <img th:if="not ${#strings.isEmpty(data.imgUrl)}" th:src="${data.imgUrl}" width="100" height="100">
            </td>
            <td th:text="${data.name}">徐一杰</td>
            <td th:text="${data.sex}">男</td>
            <td th:text="${data.age}">24</td>
            <td th:text="${data.stuId}">0000000000</td>
            <td th:text="${data.teacher?.name}"></td>
            <td th:text="${data.className}">23软开2班</td>
            <td th:text="${#dates.format(data.createTime, 'yyyy-MM-dd HH:mm:ss')}">2024-11-05 16:22:23</td>
            <td>[[${data.isGraduate} ? '是' : '否']]</td>
            <td>
                <button>
                    <a th:href="@{/student/goAddStudent(stuId=${data.id})}">编辑</a>
                </button>
                <button>
                    <a th:href="@{/student/deleteStudent(stuId=${data.id})}">删除</a>
                </button>
            </td>
        </tr>
    </tbody>
</table>

<div>
    <!-- 点击上一页，发起查询请求，并且携带 （当前页码 - 1） 作为查询页面 -->
    <button th:if="${pageNo} > 1">
        <a th:href="@{/student/findAll(pageNo = ${pageNo} - 1)}">
            上一页
        </a>
    </button>

    <button th:each="i : ${pageList}">
        <a th:href="@{/student/findAll(pageNo = ${i})}">
            [[${i}]]
        </a>
    </button>

    <button th:if="${pageNo} != ${pageTotal}">
        <a th:href="@{/student/findAll(pageNo = ${pageNo} + 1)}">
            下一页
        </a>
    </button>
</div>

</body>
</html>